"use client"

import { useState } from "react"
import { Slider } from "@/components/ui/slider"
import { Button } from "@/components/ui/button"
import { Play, SkipBack, SkipForward, Volume2 } from "lucide-react"

export default function Player() {
  const [isPlaying] = useState(false)

  return (
    <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
      <div className="container flex h-16 items-center justify-between">
        <div className="flex items-center space-x-4">
          <img src="/placeholder.svg" alt="Album art" className="h-10 w-10 rounded-md" />
          <div>
            <div className="text-sm font-medium">歌曲名称</div>
            <div className="text-xs text-muted-foreground">歌手名称</div>
          </div>
        </div>
        <div className="flex flex-col items-center space-y-2">
          <div className="flex items-center space-x-4">
            <Button size="icon" variant="ghost">
              <SkipBack className="h-4 w-4" />
            </Button>
            <Button size="icon" variant="default" className="h-8 w-8">
              <Play className="h-4 w-4" />
            </Button>
            <Button size="icon" variant="ghost">
              <SkipForward className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex w-[300px] items-center space-x-3">
            <div className="text-xs text-muted-foreground">0:00</div>
            <Slider defaultValue={[0]} max={100} step={1} className="w-full" />
            <div className="text-xs text-muted-foreground">3:45</div>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          <Volume2 className="h-4 w-4" />
          <Slider defaultValue={[100]} max={100} step={1} className="w-[100px]" />
        </div>
      </div>
    </div>
  )
}

